<template>
	<view class="setAddress">
		<view class="inputs">
			<view class="">
				<view class="tips">
					<text>收货人</text>
					<text style="opacity: 0;">空</text>
				</view>
				<input type="text" v-model="userName" placeholder="请填写姓名" placeholder-class="placeholder_style">
			</view>
			<view class="">
				<view class="tips">联系电话</view>
				<input type="text" v-model="mobile" placeholder="请填写联系电话" placeholder-class="placeholder_style">
			</view>
			<view class="">
				<view class="tips">配送地址</view>
				<view class="select_Address">
					<addressPicker pageType="收货地址" background="#fff" @region="selectCity" :isRevise="isRevise"
						:oldString="city"></addressPicker>
				</view>
				<uni-icons type="forward" size="16" color="#999999"></uni-icons>
			</view>
			<view class="">
				<textarea v-model="detailsAddress" placeholder-class="placeholder_style"
					placeholder="请填写详细地址(街道、楼牌号等)"></textarea>
			</view>
			<view class="">
				<view class="tips">设为默认地址</view>
				<switch :checked="isDefault" @change="switch1Change" color="#41644A" style="transform:scale(0.7)" />
			</view>
		</view>
		<view class="save_btn" @click="handleSave">
			<view class="">保存</view>
		</view>

	</view>
</template>

<script>
	import addressPicker from "../../../components/k-region/addressPicker.vue"
	import {
		saveAddress,
		getAddressDetails
	} from "../../../api/index.js"

	export default {
		components: {
			addressPicker
		},
		data() {
			return {
				isRevise: false, //地址是否回显
				id: '',
				userName: '',
				mobile: '',
				detailsAddress: '', //详细地址
				isDefault: false,
				city: '',
				setNew: '', //是否为新增地址(完全没有地址信息状况)
			};
		},
		methods: {
			// 编辑详情
			async onGetAddressDetails(id) {
				const res = await getAddressDetails(`s=/ApiAddress/addressadd&id=${id}&type=0`)
				const {
					data,
					status,
					msg
				} = res.data
				// console.log(res, "详情")
				if (status == 1) {
					this.userName = data.name
					this.mobile = data.tel
					this.detailsAddress = data.address
					this.city = data.area
					this.isDefault = data.isdefault == 0 ? false : true
					// console.log(data,"***")
					this.isRevise = true

				} else {
					this.showToast(msg)
				}

			},


			switch1Change(e) {
				this.isDefault = e.target.value
			},
			async onSaveAddress() {
				const {
					id,
					userName,
					mobile,
					city,
					detailsAddress,
					isDefault
				} = this
				const res = await saveAddress('s=/ApiAddress/addressadd', {
					type: 0,
					addressid: id,
					name: userName,
					tel: mobile,
					area: city,
					address: detailsAddress,
					isdefault: isDefault == true ? 1 : 0,
					latitude: '',
					longitude: ''
				})
				const {
					data,
					status,
					msg
				} = res.data

				this.showToast(msg)
				if (status == 1) {
					if (this.setNew) {
						uni.$emit("refresh", true);
					}
					setTimeout(() => {
						this.goBack(1500)
						// this.onSkip('/package/mine/myAddress/myAddress')
					})
				}
			},
			selectCity(e) {
				this.city = `${e.province_name},${e.city_name},${e.area_name}`
			},
			async handleSave() {
				// console.log('city', this.city)
				let citylist = this.city.split(',')
				// console.log(citylist[0], citylist[1] == '', citylist[2], citylist)
				
				if (!this.userName) {
					return this.showToast('请输入收货人姓名')
				}
				if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
					return this.showToast('请输入正确电话号码')
				}
				if (citylist[2]=='') {
					return this.showToast('请选择完整配送地址')
				}

				if (!this.detailsAddress) {
					return this.showToast('请输入详细地址')
				}
				this.onSaveAddress()
			},
		},
		onLoad(opt) {
			this.id = opt.id
			this.setNew = opt.setNew
			if (this.id) {
				this.onGetAddressDetails(this.id)
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.setAddress {
		.inputs {
			background-color: #fff;

			>view {
				padding: 44upx 30upx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1upx solid #F3F3F3;

				.tips {
					font-size: 30upx;
					color: #666666;
					margin-right: 80upx;
				}

				input,
				textarea,
				.select_Address {
					flex: 1;
					font-size: 30upx;
				}

				textarea {
					height: 80upx;
				}

				.placeholder_style {
					font-size: 30upx;
					color: #AAAAAA;
				}
			}
		}

		.default_btn {
			display: flex;
			align-items: center;
			padding: 48upx 0 88upx;

			.is_select {
				width: 36upx;
				height: 36upx;
				border-radius: 50%;
				background-color: #866EFF;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1upx solid #333333;

				image {
					width: 18upx;
					height: 12upx;
				}
			}

			.no_select {
				width: 36upx;
				height: 36upx;
				border-radius: 50%;
				background-color: #F0F0F0;
				border: 1upx solid #333333;
			}

			.default_text {
				font-size: 26upx;
				margin-left: 20upx;
				color: #999999;
			}

			text {
				margin-left: 42upx;
			}
		}

		.add_btn {
			width: 100%;
			height: 92upx;
			border-radius: 20upx;
			text-align: center;
			line-height: 92upx;
			background-color: #866EFF;
			color: #fff;
			font-size: 32upx;
			font-weight: bold;
		}

		.save_btn {
			width: 100%;
			padding: 30upx 20upx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9;
			background-color: #f7f7f7;

			>view {
				width: 100%;
				height: 86upx;
				border-radius: 86upx;
				text-align: center;
				line-height: 86upx;
				background-color: #41644A;
				color: #fff;
				font-size: 32upx;
			}
		}
	}
</style>
